import React, { Component } from 'react'
import "./State.css"

export default class State extends Component {
    state={
        username:"",
        pwd:"",
        emil:""
    }
    input = (type)=>{
        return (e)=>{
            this.setState({
                [type]:e.target.value
            })
        }
    }
    // input1 = (e)=>{
    //     this.setState({
    //         pwd:e.target.value
    //     })
    // }
    fn = ()=>{
        alert(`账号是:${this.state.username} 密码是：${this.state.pwd} 邮箱是${this.state.emil}`)
    }
    fn1 = ()=>{
        this.setState({
            username:"",
            pwd:"",
            emil:""
        })
    }
  render() {
    return (

        <div className='box'>
      <input  onChange={this.input("username")} value={this.state.username}  type="text" name="" id="" placeholder='请输入账号'/><br />
      <input onChange={this.input("pwd")} value={this.state.pwd} type="text" name="" id="" placeholder='请输入密码' /><br />
      <input onChange={this.input("emil")} value={this.state.emil} type="text" name="" id="" placeholder='请输入邮箱' /><br />
      <button onClick={this.fn}>捕获</button>
      <button onClick={this.fn1}>重置</button>

    </div>
 
    )
  }
}
